import { Card } from 'antd'
import React, { useState, useEffect, useRef } from 'react'
import { Form, Input, Button, Checkbox } from 'antd'
import * as THREE from 'three'
import BIRDS from 'vanta/dist/vanta.birds.min'
import style from './index.module.scss'

import { SmileOutlined, EditOutlined } from '@ant-design/icons'
import { useDispatch } from 'react-redux'
import { login } from '../../store/actions/login'
import { useHistory } from 'react-router-dom'
export const Login = () => {
  const dispatch = useDispatch()
  const history = useHistory()
  const [vantaEffect, setVantaEffect] = useState(0)
  const myRef = useRef(null)
  useEffect(() => {
    if (!vantaEffect) {
      setVantaEffect(
        BIRDS({
          el: myRef.current,
          THREE: THREE,
          mouseControls: true,
          touchControls: true,
          gyroControls: false,
          minHeight: 600.0,
          minWidth: 200.0,
          scale: 1.0,
          scaleMobile: 1.0,
          backgroundColor: 0xf2f2f2,
          color2: 0x397987,
          birdSize: 1.4,
          wingSpan: 21.0,
          speedLimit: 2.0,
          separation: 100.0,
          alignment: 62.0,
          cohesion: 58.0,
        })
      )
    }
    return () => {
      if (vantaEffect) vantaEffect.destroy()
    }
  }, [vantaEffect])

  const onFinish = async (values) => {
    await dispatch(login(values))
    history.push('/home')

    // const res = await dispatch(login(values))
    // console.log(res, qqqqqq

    // await history.push('/home')
  }

  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo)
  }
  return (
    <div className={style.login}>
      <div ref={myRef}></div>
      <Card className="login-container">
        <div className="login-title">
          <img src="https://dgimg-1306779837.cos.ap-shanghai.myqcloud.com/20220502/9AJocUPc.ico" alt="" />
          <span>Zg's 订单系统</span>
        </div>
        <Form
          name="basic"
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete="off"
          size="large"
          initialValues={{
            remember: true,
          }}>
          <Form.Item name="account"
            rules={[
              {
                required: true,
                message: '请输入手机号',
              },
            ]}>
            <Input placeholder="请输入手机号" prefix={<SmileOutlined />} />
          </Form.Item>

          <Form.Item name="password"
            rules={[
              {
                required: true,
                message: '请输入密码',
              },
            ]}>
            <Input.Password placeholder="请输入验证码" prefix={<EditOutlined />} />
          </Form.Item>

          <Form.Item
            name="remember"
            valuePropName="checked"
            wrapperCol={{
              offset: 8,
              span: 16,
            }}>
            <Checkbox>Remember me</Checkbox>
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit" block>
              登录
            </Button>
          </Form.Item>
        </Form>
      </Card>
    </div>
  )
}
